<template>
  <div class="list">
    <div class="list_btn">
        <span :class="{active:b==index}" @click="huan(index)" v-for="(item,index) in listArr" :key="index">{{item.tagname}}</span>
    </div>
    <div class="good_list">
        <div class="good" v-for="(item,index) in listArr[b].list" :key="index">
            <div class="good_img">
                <img :src="item.pic" alt="">
            </div>
            <div class="good_message">
                <p><span>{{item.name}}</span>&nbsp;|&nbsp;<span>{{item.dz}}</span></p>
                <h3>{{item.jj}}</h3>
                <div class="good_price">
                    <div class="price">
                        <span>{{item.tj}}</span><br>
                        <span>￥{{item.price}}</span><span>{{item.zk}}折</span><br>
                        <span style="color:#666">￥{{item.yj}}</span>
                    </div>
                    <div class="good_btn">
                        <button @click="lingqu(item)">{{item.lq?'去使用':'马上抢'}}</button><br>
                        <span>已售{{item.xl}}份</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let pic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2Fc2fdfc039245d688d43ffa029c886a1ed21b0ef48e49&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668270400&t=29502105e0bd1c6372024d09e644bda3"
export default {
    data(){
        return { 
            b:0,
            listArr:[
                {
                    tagname:'正在抢购',
                    list:[
                        {pic,name:'汉堡王',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                        {pic,name:'华莱士',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                        {pic,name:'贡天下陕西特产',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                        ]
                },
                {
                    tagname:'上新预告',
                    list:[
                    {pic,name:'朝西面',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                    {pic,name:'超荷风',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                    {pic,name:'烤面筋',dz:'北美天地餐厅',jj:'买1送1明星皇堡 | 用心火烤肉质紧实 鲜嫩多汁 爆爆团',tj:'爆爆团价',price:25,zk:5,yj:50,xl:9029,lq:false},
                ]
                }
            ]  
        }
    },
    methods: {
        huan(index){
           this.b=index;
        },
        lingqu(item){
            item.lq=true;
        }
    },
}
</script >

<style lang="scss" scoped>
    .list{
        width: 95%;
        height: 75%;
        position: fixed;
        bottom: 0px;
        margin: 10px;
        box-sizing: border-box;
    }
    .list .list_btn{
        width: 100%;
        height: 40px;
    }
    
    .list .list_btn span{
        margin:0 30px 0 10px;
        display: inline-block;
        line-height: 40px;
        color: white;
    }
    .list .list_btn .active{
        font-weight: bold;
        color: aqua;
    }
    .good_list{
        width: 95%;
        height: 80%;
        margin: auto;
        background: #f3f3f3;
    }
    .good {
        width: 100%;
        height: 120px;
        display: flex;
        background: white;
        border-radius: 5px;
    }
    .good_img{
        width: 90px;
        height: 90px;
        background: #999;
        margin-top: 10px;
        margin-left: 5px;
    }
    .good_img img{
       width: 100%;
    }
    .good_message{
        width: 100%;
        margin-top: 10px;
        margin-left: 10px;
        font-size: 12px;
    }
   .good_message .good_price{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: red;
    }
    .good_message .good_price .price{
        line-height: 20px;
    }

    .good_message .good_price .price span:nth-child(3){
        font-size: 18px;
    }
    .good_message .good_price .price span:nth-child(4){
        display: inline-block;
        width: 25px;
        height: 15px;
        border: 1px solid red;
        font-size: 10px;
        text-align: center;
        line-height: 15px;
        margin-left: 5px;
    }
   
    .good_message .good_price .good_btn{
        line-height: 20px;
        margin-right: 5px;
    }
    .good_message .good_price .good_btn button{
        height: 30px;
        width: 80px;
        background: red;
        color: white;
        border-radius: 15px;
        border:none;
        margin-bottom: 5px;
    }
    .good_message .good_price .good_btn span{
        height: 30px;
        width: 80px;
        text-align: center;
        color: red;
        display: inline-block;
    }
</style>> 

</style>